<template>
  <navbar :isBack="true" title="赛事搜索"></navbar>
  <view class="header">
    <view class="search flex">
      <image src="/static/icon/07.png"></image>
      <input type="text" placeholder="请输入" v-model="params.key_words" @blur="blur" />
    </view>
  </view>
  <view class="content">
    <mactchList :list="list"></mactchList>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getMatchList } from '@/service/api/index'
import tools from '@/utils/tools'
import mactchList from '@/common/list/match.vue'
import { onLoad } from '@dcloudio/uni-app'
let params = reactive({
  page: 1,
  type: 0,
  state: 0,
  classify: 0,
  key_words: ''
})
let list = ref([])

const blur = () => {
  params.page = 1
  list.value = []
  getMatchListApi()
}

onLoad((option) => {
  params = JSON.parse(option.params)
})

// 赛事列表
const getMatchListApi = async () => {
  const { msg } = await getMatchList(params)
  if (!msg.data.length && params.page != 1) {
    return tools.showToast('暂无更多数据'), params.page--
  }
  list.value = [...list.value, ...msg.data]
  // console.log(msg)
}
</script>

<style>
page {
  background-color: #f9f9f9;
}
</style>
<style scoped lang="scss">
.header {
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  .search {
    margin: 20rpx 28rpx;
    padding: 16rpx 26rpx;
    border-radius: 32rpx;
    background-color: #f9f9f9;
    image {
      width: 32rpx;
      height: 32rpx;
    }
    input {
      flex: 1;
      margin-left: 14rpx;
      font-size: 28rpx;
    }
  }
}
.content{
	padding: 0rpx 24rpx 0rpx 24rpx;
}
</style>
